.component-overview {
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .rs-co-group {
    margin-top: 20px;
  }
  .rs-co-title {
    display: block !important;
    clear: both;
    border: none !important;
    margin: 10px 0 !important;
    width: 100%;
  }

  .rs-co-box {
    background: var(--rs-placeholder);
    padding: 10px;
    width: 150px;
    border-radius: 6px;
    color: var(--rs-text-secondary);
    aspect-ratio: 1 / 1;

    code {
      padding: 0;
    }
    &:hover {
      color: var(--rs-text-primary);
    }
  }

  .rs-co-header {
    margin: 4px 0;
    display: block;
  }

  .rs-co-content {
    .rs-co-name {
      font-size: 12px;
      color: var(text);
    }
  }

  .sorted-list {
    .title {
      border-bottom: 1px solid var(--rs-border-primary);
      margin: 10px 0;
    }
    .rs-list {
      box-shadow: none;
    }
    .rs-list-item {
      width: 200px;
      display: inline-block;
      margin-right: 10px;
    }
  }

  .toolbar {
    .component-search-input {
      flex-grow: 1;
      background: var(--rs-placeholder) !important;
      border-color: var(--rs-placeholder);

      .rs-input {
        background: var(--rs-placeholder);
      }
    }

    .group {
      display: flex;
      .rs-btn-lg {
        padding: 13px;
        color: var(--rs-text-secondary);
      }
    }
  }
}

.support-version {
  margin: 4px 0;
}
